<template>
	<view>
		<page-head headTitle="商品添加" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<form>
			<view class="bg-white m-t9">
				<view class="p-l-r3 flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">商品名称</text>
					<view><input v-model="goodsName" type="text" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入商品名称"></view>
				</view>
				<view class="p-l-r3 flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">商品介绍</text>
					<view><input v-model="description" type="text" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入商品介绍"></view>
				</view>
				<view class="p-l-r3 flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</text>
					<view><input v-model="price" type="number" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入商品价格"></view>
				</view>
				<view class="p-l-r3 flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</text>
					<view><input v-model="stock" type="number" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入商品库存"></view>
				</view>
				<view class="p-l-r3 flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</text>
					<view>
						<radio-group class="flex" @change="radioChange">
							<label class="flex align-center m-r6" v-for="(item, index) in items" :key="item.value">
								<view>
									<radio :value="item.value" :checked="index === current" class="radio-button" color="#ffeb0f"/>
								</view>
								<view class="color-table">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="p-l2 p-r2 p-t-3 bg-white padding-bottom p-b5 flex flex-wrap">
				<view style="position: relative;" v-for="(item,index) in album" :key="index" class="album m-b2">
					<image :src="item" :data-src="item" class="album-pic" @tap="previewImage">
					<view class="close" @tap="delect(index)"><image src="/static/images/icon_delete88.png" class="album-image"></view>
				</view>
				<image src="/static/images/upload-photos.png" @click="changeImg" class="upload-photos ml-2 m-r1">
			</view>
			<bright-button title="确认" @licekSubmit="submitInfo" class="m-t12"></bright-button>
		</form>
	</view>
</template>

<script>	
import pageHead from '@/components/common/page-head.vue'
import uploadImage from '@/components/common/upload-image.vue'
import brightButton from '@/components/common/bright-button.vue'
	export default {
		components:{
			pageHead,
			uploadImage,
			brightButton
			
		},
		data() {
			return {
				image:'/static/images/upload-product.png',
				goodsName:'',
				description:'',
				price:0,
				stock:0,
				items: [{
							value: '1',
							name: '上架'
						},
						{
							value: '0',
							name: '下架'
						}
					],
				current: 0,
				album:[]
			}
		},
		onLoad(e) {
			var id = e.id;
			this.orderId = parseInt(id);
			console.log(this.orderId);
			this.getDoodsList();
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
		   radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						console.log(this.current);
						break;
					}
				}
			},
			//头像上传
			changeImg(){
				var Token = uni.getStorageSync('token');
				//console.log(Token);
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
						//获取图片路径
						//this.image = res.tempFilePaths[0];
						//console.log(res.tempFilePaths[0]);	
						uni.uploadFile({
							url:'http://175.24.68.5:9999/api/file/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'show'	
							},
							header: {
								'XX-Device-Type':'wxapp',
								'XX-Token': Token
							},
						    success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								var arr = [];
								if(data.code == 1){
									this.album.push(data.data.url);
								}
								//console.log(this.album);	
							}
						});	
				    }
				});
			},
			//获取商品信息
			getDoodsList(){
				if(this.orderId == NaN){
					return false;
				}
				this.$myRequest({
					method:'POST',
					url:'/api/guide/goods',
					data:{
						id:this.orderId
					}
				}).then(res=>{ 
					console.log(res)
					let data = res.data.data;
					this.goodsName = data.name;
					this.description = data.description;
					this.price = data.price;
					this.stock = data.stock;
					this.current = data.status;
					this.album = data.images.split(",");	
				});
			},
			//商品提交
			submitInfo(){
				if(this.goodsName == '' || this.current != 0 && this.current != 1 || this.price == '' || this.stock == '' || this.album == '' || this.description ==''){
					uni.showToast({
					    title: '信息未填完',
					    duration: 2000
					});
					return false;
				}
				this.$myRequest({
					method:'POST',
					url:'/api/guide/goodsedit',
					data:{
						id:this.orderId,
						name:this.goodsName,
						status:this.current,
						price:this.price,
						stock:this.stock,
						images:this.album.join(','),
						description:this.description
					}
				}).then(res=>{ 
					console.log(res)
					uni.showToast({
					    title: '提交成功',
					    duration: 2000
					});
					setTimeout(function(){
						uni.navigateTo({
							url: '../goodsManage/goodsManage'
						});
					},3000);
				});
			},
			//删除图片
			delect(index){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该图片？',
					success: (res) =>{
						console.log(res);
						if (res.confirm) {
							//删除数组中指定项
							function removeByValue(arr, val) {
								for(var i=0; i<arr.length; i++) {
									if(arr[i] == val) {
										arr.splice(i, 1);
										break;
									}
								}
							}
							var imageUrl = that.album.splice(index, 1)
							console.log(imageUrl);
							removeByValue(that.album, imageUrl);	
						} 
					}
				});
			},
			
		}
	}
</script>

<style scoped>
.upload-photos{width: 202rpx;height: 200rpx;}
.album{width: 200rpx; height: 200rpx;margin-left:19rpx;margin-right: 19rpx;}
.album-pic{width: 100%; height: 200rpx;}
.close{position: absolute; top: 0;right: 0;width: 50rpx;height: 50rpx;}
.album-image{width: 100%;height: 50rpx;}
</style>
